<template>
  <div class="tile">
    <div class="header">
      <el-button
        v-if="state != 1"
        size="small"
        style="margin-right: 15px"
        @click="onStart"
        >开始</el-button
      >
      <el-button
        v-if="state == 1"
        size="small"
        style="margin-right: 15px"
        @click="onPause"
        >暂停</el-button
      >
      <el-button
        v-if="state != 0"
        size="small"
        style="margin-right: 15px"
        @click="onStop"
        >停止</el-button
      >
    </div>
    <div class="card">
      <div class="row" v-if="state == 0">
        <div class="flex-center">最低海拔（米）:</div>
        <div class="row-input">
          <el-input type="number" v-model="inputData.minValue"></el-input>
        </div>
      </div>
      <div class="row" v-if="state == 0">
        <div class="flex-center">最高海拔（米）:</div>
        <div class="row-input">
          <el-input type="number" v-model="inputData.maxValue"></el-input>
        </div>
      </div>
      <div class="row" v-if="state == 0">
        <div class="flex-center">淹没速度（米/秒）:</div>
        <div class="row-input">
          <el-input type="number" v-model="inputData.speed"></el-input>
        </div>
      </div>
      <div class="row" v-if="state != 0">
        <div class="flex-center">当前高度:</div>
        <div class="row-input">
          <el-slider
            :step="1"
            :max="inputData.maxValue"
            :min="inputData.minValue"
            v-model="currentHeight"
            size="small"
            @input="onChangeHeight"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  onMounted,
  onUnmounted,
  defineProps,
  defineEmits,
  ref,
  reactive,
} from "vue";
import SvgIcon from "../../../components/SvgIcon.vue";
import { useStore } from "../../../store/store";
import { ElMessage } from "element-plus";

const props = defineProps({
  layerId: {
    type: String,
  },
});

const inputData = reactive({
  minValue: 0,
  maxValue: 100,
  speed: 10,
});

const state = ref(0); // 0: 停止 1：播放 2：暂停
const started = ref(false);
const paused = ref(false);

const currentHeight = ref(0);

const tileId = props.layerId.substr(5);
const tilesetLayer = viewer.getLayerById(tileId);

const tilesetFlood = tilesetLayer.flood;

function onStart() {
  viewer.scene.requestRenderMode = false;
  tilesetFlood.setOptions({
    floodAll: true,
    minHeight: inputData.minValue,
    maxHeight: inputData.maxValue,
    speed: inputData.speed,
  });

  if (state.value == 2) {
    tilesetFlood.height = currentHeight.value;
    paused.value = false;
  }

  // tilesetFlood.on(mars3d.EventType.start, function (e) {
  //   started.value = true;
  // });
  tilesetFlood.on(mars3d.EventType.change, function (e) {
    currentHeight.value = e.height;
  });
  // tilesetFlood.on(mars3d.EventType.end, function (e) {
  //   started.value = false;
  // });
  state.value = 1;
  tilesetFlood.start();
}

function onChangeHeight(data) {
  tilesetFlood.height = data;
}

function onPause(data) {
  state.value = 2;
  tilesetFlood.stop();
}

function onStop() {
  tilesetFlood.clear();
  state.value = 0;
}

onUnmounted(() => {
  onStop();
});
</script>

<style lang="scss" scoped>
.tile {
  height: 300px;
  width: 380px;
  overflow: auto;
  padding: 0 10px;
  font-size: 12px;
}
.header {
  display: flex;
  align-items: center;
  color: #fff;
  margin-left: 15px;
  margin-top: 15px;
}
.tooltip-icon {
  cursor: pointer;
  font-size: 16px;
  color: #fff;
  margin-right: 3px;
}
.row {
  color: #fff;
  margin: 15px 0;
  .row-input {
    margin-left: 20px;
  }
  .flex-center {
    display: flex;
    align-items: center;
  }
}
.card {
  background-color: rgba($color: #000, $alpha: 0.4);
  margin: 10px;
  padding: 2px 10px;
}
.el-col {
  display: flex;
  align-items: center;
}
</style>